<template>
  <div>
    <el-row>
      <el-col :span="1">&nbsp &nbsp</el-col>
      <el-col :span="22">
        <el-button @click="addLeagueClass" type="success" round>新增团课 </el-button>
        <el-table :data="page.records" border>
          <el-table-column prop="leagueClassId" label="团课ID" width="105">
          </el-table-column>
          <el-table-column prop="leagueClassName" label="团课名" width="115">
          </el-table-column>
          <el-table-column prop="coachName" label="教练名" width="118">
          </el-table-column>
          <el-table-column prop="venueName" label="场馆名" width="118">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="117">
          </el-table-column>
          <el-table-column prop="minute" label="课程时长" width="118">
          </el-table-column>
          <el-table-column prop="classNum" label="课程数量" width="118">
          </el-table-column>
          <el-table-column prop="classTypeName" label="课程类型名称" width="118">
          </el-table-column>
          <el-table-column prop="leagueClassState" label="团课状态" width="118">
            <template slot-scope="scope">
              <template v-if="scope.row.leagueClassState == 0">已删除</template>
              <template v-if="scope.row.leagueClassState == 1">可预约</template>
              <template v-if="scope.row.leagueClassState == 2">预约满</template>
              <template v-if="scope.row.leagueClassState == 3">已完课</template>
            </template>
          </el-table-column>
          <el-table-column prop="idClassroom" label="教室" width="118">
          </el-table-column>
          <el-table-column prop="score" label="评分" width="118">
          </el-table-column>


          <el-table-column label="操作" width="126">
            <template #default="scope">
              <el-button @click="deleteLeague(scope.row.leagueClassId)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>

        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="page.pageNum" :page-sizes="[1, 2, 3, 5]" :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="page.total">
        </el-pagination>

        <el-dialog title="请输入新增团课信息" :visible.sync="showAddwindow" width="35%">
          团课名：<el-input v-model="add.leagueClassName" placeholder="请输入团课名" style="width: 50%;"></el-input><br>
          教练:
          <el-select v-model="add.coachId" placeholder="请选择">
            <el-option v-for="item in List" :key="item.coachId" :label="item.coachName"
              :value="item.coachId"></el-option>
          </el-select><br>
          教室:
          <el-select v-model="add.classroomId" placeholder="请选择">
            <el-option v-for="item in ClassList" :key="item.id" :label="item.classroomId" :value="item.id"></el-option>
          </el-select><br>
          课程类别:
          <el-select v-model="add.classTypeId" placeholder="请选择">
            <el-option v-for="item in ClassTypeList" :key="item.classTypeId" :label="item.classTypeName"
              :value="item.classTypeId"></el-option>
          </el-select><br>
          价格：<el-input-number v-model="add.price" controls-position="right" :min="1"
            placeholder="请输入价格(/元)"></el-input-number><br>
          课程时长：<el-input v-model="add.minute" placeholder="该课课程时长" style="width: 50%;"></el-input><br>
          课程描述：<el-input v-model="add.leagueClassDetail" placeholder="请输入课程描述" style="width: 50%;"></el-input><br>
          课程数量：<el-input v-model="add.classNum" placeholder="请输入课程数量(/节)" style="width: 50%;"></el-input><br>
          课程容纳人数：<el-input-number v-model="add.peopleNum" controls-position="right" :min="1" placeholder="请输入该课程最大容纳人数"
            style="width: 280px;"></el-input-number><br>

          <span slot="footer">
            <el-button @click="showAddwindow = false" type="danger" round>取 消</el-button>
            <el-button @click="addLeague()" type="success" round>确 认</el-button>
          </span>
        </el-dialog>

      </el-col>

      <el-col :span="1">&nbsp</el-col>

    </el-row>
  </div>
</template>

<script>
  export default {
    name: "VenueClassroom",
    data() {
      return {
        ClassTypeList: [], // 查出来供新增的时候选择课程类别
        ClassList: [], // 查出来供新增的时候选择教室
        List: [], // 查出来供新增的时候选择教练名
        add: {}, // 新增的dialog收集的对象
        showAddwindow: false, // 新增的窗口
        page: {},
        param: {
          pageNum: 1,
          pageSize: 5,
        },
      }
    },
    methods: {
      //删除团课（伪删除）
      deleteLeague(leagueClassId) {
        this.$http.get("product/yLeagueClass/deleteLeagueClassState", {
          params: {
            leagueClassId: leagueClassId
          }
        }).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.loadAllLeagueClass();
        });
      },
      //新增团课
      addLeague() {
        this.$http.post("product/yLeagueClass/addLeagueClass", this.add).then(resp => {
          this.$message({
            message: resp.data.msg,
            type: 'success'
          });
          this.showAddwindow = false;
          this.loadAllLeagueClass();
        });
      },
      //查询课程类别 新增的时候选择
      loadListClassType() {
        this.$http.get("/product/yClassType/loadClassTypeList").then(resp => {

          this.ClassTypeList = resp.data.data;
        })
      },
      //根据场馆id查出来教室 新增的时候选择
      loadListClass() {
        this.$http.get("/venue/yVenueClassroom/loadClassroomByTokenId").then(resp => {
          this.ClassList = resp.data.data;
        })
      },
      //根据id查出来教练的姓名 新增的时候选择
      loadListVenueCoach() {
        this.$http.get("/venue/yVenueCoach/loadListVenueCoach").then(resp => {
          this.List = resp.data.data;
        })
      },
      //打开新增窗口
      addLeagueClass() {
        this.showAddwindow = true;
      },
      //分页
      handleSizeChange(val) {
        this.param.pageSize = val;
        this.loadAllLeagueClass();
      },
      handleCurrentChange(val) {
        this.param.pageNum = val;
        this.loadAllLeagueClass();
      },
      //查询全部团课
      loadAllLeagueClass() {
        this.$http.get("/product/yLeagueClass/VenuePageMyLeagueClass", {
          params: {
            pageNum: this.param.pageNum,
            pageSize: this.param.pageSize
          }
        }).then(resp => {
          this.page = resp.data.data;
        })
      }
    },
    created() {
      this.loadAllLeagueClass();
      this.loadListVenueCoach();
      this.loadListClass();
      this.loadListClassType();
    }
  }
</script>

<style>
</style>
